<!-- src/views/attraction/Payment.vue -->
<template>
  <div class="payment">
    <el-header class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>门票支付</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main class="main">
      <!-- 景区信息 -->
      <el-card class="scenic-card">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.QTNPdEdaOiaKGgeRZu0HQwHaFj?w=221&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="景区图片">
        <div class="scenic-info">
          <h2>北京环球度假区</h2>
          <p>3.4万条评价</p>
          <p>看热门IP，玩精彩项目</p>
        </div>
      </el-card>
      <!-- 总价和提交订单 -->
      <el-card class="total-card">
        <p>共{{ ticketQuantity }}张门票，合计：¥{{ ticketQuantity * 500 }}</p>
        <el-button type="primary" @click="pay">立即支付</el-button>
      </el-card>
    </el-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ticketQuantity: 2
    };
  },
  methods: {
    pay() {
      // 这里可以添加支付逻辑，比如调用API
      console.log('支付成功');
    }
  }
};
</script>

<style scoped>
.payment {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #337ecc;
  color: white;
  text-align: center;
  line-height: 60px;
}

.main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.scenic-card {
  display: flex;
  align-items: center;
  gap: 20px;
}

.scenic-card img {
  width: 200px;
  height: 150px;
  object-fit: cover;
}

.total-card {
  padding: 20px;
}
</style>
